<template>
  <div id="profile-page">
    <h2 class="subtitle">{{t('profile.myAccount')}}</h2>
    <hr>
    <!-- 描述性部分 -->
    <div id="profile-container">
      <div id="descriptions-part">
        <form-field-component :title="t('profile.username')"
                              :field-description="t('profile.usernameDescription')">
          <a-input id="username" type="text" v-model:value="staffWrapper.account.username"/>
        </form-field-component>

        <form-field-component :title="t('profile.email')"
                              :field-description="t('profile.emailDescription')">
          <a-input id="email" type="text" v-model:value="staffWrapper.account.email"/>
        </form-field-component>

        <form-field-component :title="t('profile.bio')"
                              :field-description="t('profile.bioDescription')">
          <a-input id="bio" type="text"/>
        </form-field-component>
        
        <a-button type="primary" @click="changeStaffAccount(staffWrapper)">{{t('profile.submitAccountDetails')}}</a-button>

        <h2 class="subtitle">{{t('profile.myProfile')}}</h2>
        <hr>

        <form-field-component :title="t('profile.name')"
                              :field-description="t('profile.nameDescription')">
          <a-input id="name" type="text" v-model:value="staffWrapper.name"/>
        </form-field-component>

        <form-field-component :title="t('profile.gender')"
                              :field-description="t('profile.genderDescription')">
          <a-radio-group v-model:value="staffWrapper.gender">
            <a-radio-button value="MALE">{{t('words.male')}}</a-radio-button>
            <a-radio-button value="FEMALE">{{t('words.female')}}</a-radio-button>
          </a-radio-group>
        </form-field-component>

        <form-field-component :title="t('profile.phone')"
                              :field-description="t('profile.phoneDescription')">
          <a-input id="phone" type="text" v-model:value="staffWrapper.phone"/>
        </form-field-component>

        <form-field-component :title="t('profile.birthday')"
                              :field-description="t('profile.birthdayDescription')">
          <a-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model:value="staffWrapper.birthday" format="YYYY-MM-DD" />
        </form-field-component>

        <form-field-component :title="t('profile.address')"
                              :field-description="t('profile.addressDescription')">
          <a-input id="address" type="text" v-model:value="staffWrapper.address"/>
        </form-field-component>

        <a-button type="primary" @click="handleUpdateStaff">{{t('profile.submitStaffDetails')}}</a-button>

      </div>

      <div id="avater-part">
        <h4>{{t('profile.avater')}}</h4>
        <img @click="chooseLocalImage" id="avater-img" :src="staffAvater" alt="">
        <input id="image-chooser" type="file" accept="image/*" name="name" style="display: none;" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import FormFieldComponent from '@components/public/FormFieldComponent.vue';
import { useI18n } from 'vue-i18n';
import { ref, computed, onMounted } from 'vue';
import useStaff from '@/composable/staff';
import defaultIcon from "@assets/imgs/g.jfif?url";
import useCropperModal from '@composable/cropper-modal';
import useStaffModifier from '@composable/staff-modifier';
import useStaffAccountModifier from '@/composable/staff_account_modifier';
import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css';

const { t } = useI18n();
const { getLocalStaff, fetchRemoteLoggedStaffToLocal } = useStaff();
const { showCropModal } = useCropperModal();
const { updateStaff, updateStaffAvater } = useStaffModifier();
const { changeStaffAccount } = useStaffAccountModifier(() => {
  refetchUser();
  message.success("修改账户成功");
}, (e) => message.error(`修改账户失败: ${e}`));


let imageChooser;
const staffWrapper = ref(JSON.parse(JSON.stringify(getLocalStaff())));

const refetchUser = () => {
  fetchRemoteLoggedStaffToLocal().then(newStaff => {
    staffWrapper.value = JSON.parse(JSON.stringify(newStaff));
  });
}

const onAvaterUploaded = (newAvaterUrl) => {
  updateStaffAvater(newAvaterUrl, () => {
    message.success("修改头像成功");
    refetchUser();
  })
};

const handleUpdateStaff = () => {
  updateStaff(staffWrapper.value, (_) => {
    message.success("修改员工信息成功");
    refetchUser();
  }, (e) => message.error(`出现错误：${e}`));
}

const chooseLocalImage = () => {
  imageChooser.click();
}

const staffAvater = computed(() => {
  if (staffWrapper.value.avater) return staffWrapper.value.avater;
  else return defaultIcon;
});


onMounted(() => {
  imageChooser = document.getElementById("image-chooser");
  imageChooser.onchange = (e) => {
    const reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onloadend = function(e2){
      showCropModal(e2.target.result, onAvaterUploaded)
    };
  }
})
</script>

<style scoped>
#profile-page {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  margin-top: 40px;
  background-color: #fff;
  padding: 40px;
  padding-top: 0px;
  border-radius: 1em;
}
#profile-page {
  padding-top: 20px;
}

#profile-container {
  display: flex;
  flex-direction: row;
}
#descriptions-part {
  flex: 5;
}
#avater-part {
  flex: 3;
}
hr {
  outline: none;
  border-color: #e3e3e3;
  background-color: #e3e3e3;
}
.subtitle {
  margin-top: 20px;
  font-weight: 500;
}
#avater-img {
  display: block;
  width:200px;
  height: 200px;
  border-radius: 360px;
  border: #e3e3e3 1px solid;
  margin: 0 auto;
  cursor: pointer;
}
#avater-img:hover {
  box-shadow: 3px 16px 25px -19px rgba(131,131,131,0.75);
}


#avater-part {
  padding: 20px;
}

@media screen and (max-width: 700px) {
  #profile-container {
    flex-direction: column-reverse;
  }
  #avater-img {
    margin: 0;
  }
}

</style>
